<!--参数配置-->
<template>
  <div class="allBox">
    <div class="webPageTitle">参数配置</div>
    <div class="leftTitle">
      <div class="dataTitle">参数信息表</div>
      <div style="float: right;width: 280px"  class="myFromBox" >
        <Input v-model="queryType"  placeholder="请输入要查询的配置类型">
        <Button slot="append" icon="ios-search" @click="selectData(1)" ></Button>
        </Input>
      </div>
      <div style="float: right;width: 280px"  class="myFromBox" >
        <Input v-model="queryKey" placeholder="请输入要查询的配置键值" >
        <Button slot="append" icon="ios-search" @click="selectData(1)"></Button>
        </Input>
      </div>
    </div>
    <div style="float: left;width: 100%;">
      <Table highlight-row :loading="loading" :columns="tableColumns" :data="tableData" ></Table>
    </div>
    <div  class="pageBox" >
      <template>
        <Button type="primary" @click="insertButtom = true" style="float: left;margin-left: 5.5%">添加</Button>
        <Modal
          v-model="insertButtom"
          title="添加"
          @on-ok="insertData()"
          @on-cancel="">
          <p style="margin-top: 10px;font-size: 14px">类型:</p>
          <Input v-model="addType" size="large" ></Input>
          <p style="margin-top: 10px;font-size: 14px">键值:</p>
          <Input v-model="addKey" size="large" ></Input>
          <p style="margin-top: 10px;font-size: 14px">内容:</p>
          <Input v-model="addValue" size="large" ></Input>
          <p style="margin-top: 10px;font-size: 14px">描叙:</p>
          <Input v-model="addDesc" size="large" ></Input>
        </Modal>
      </template>

      <template>
        <Modal
          v-model="updateButtom"
          title="修改"
          @on-ok="updateData"
          @on-cancel="">
          <p style="margin-top: 10px;font-size: 14px">类型:</p>
          <Input v-model="newData.type" size="large" disabled></Input>
          <p style="margin-top: 10px;font-size: 14px">键值:</p>
          <Input v-model="newData.key" size="large" disabled ></Input>
          <p style="margin-top: 10px;font-size: 14px">内容:</p>
          <Input v-model="newData.value" size="large" ></Input>
          <p style="margin-top: 10px;font-size: 14px">描叙:</p>
          <Input v-model="newData.description" size="large" ></Input>
        </Modal>
      </template>
  `
      <Modal v-model="deleteBut " width="360">
        <p slot="header" style="color:#f60;text-align:center">
          <Icon type="information-circled"></Icon>
          <span>删除确认</span>
        </p>
        <div style="text-align:center">
          <p>此参数信息配置删除后将无法恢复！</p>
          <p>是否继续删除？</p>
        </div>
        <div slot="footer">
          <Button type="error" size="large" long   :loading="deleteBut_loading"  @click="deleteData">删除</Button>
        </div>
      </Modal>
      <!--读取API错误-->
      <template>
        <Modal v-model="redAPIModal" width="360">
          <p slot="header" style="color:#f60;text-align:left">
            <Icon type="information-circled"></Icon>
            <span>{{redAPIModalTit}}</span>
          </p>
          <div style="text-align:left">
            <p>错误信息：</p>
            <p>{{redAPIModalCen}}</p>
          </div>
          <div slot="footer">
            <Button type="error" size="large" long  @click="redAPIModalFun">确定</Button>
          </div>
        </Modal>

      </template>

      <Page :total="total" :page-size="rows" show-total @on-change="selectData" class="pageStyle"></Page>
    </div>
  </div>
</template>
<script>

  export  default {
    data(){
      return{
        deleteBut_loading:false,
        deleteBut:false,
        updateButtom:false,                                        //修改控制按钮
        insertButtom: false,                                       //添加控制按
        queryType:'',                                             //要查询的字段
        queryKey:'',
        tableColumns:[
          {title:'序号',type: 'index', width: 60, align: 'center'},
          {title:'类型',key:'type',align: 'center'},
          {title:'键值',key:'key',align: 'center'},
          {title:'内容',key:'value',align: 'center'},
          {title:'描叙',key:'description',align: 'center'},
          {title:'状态',key:'status',align: 'center'},
          {
            title: '操作',
            key: 'action',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'warning',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.showupdate(params.row)
                    }
                  }
                }, '修改'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.deletePop(params.row.key)
                    }
                  }
                }, '删除')
              ]);
            }
          }
        ],                                        //表构造
        tableData:[],                                            //数据
        deleteId:'',                                            //删除的id
        /*分页*/
        status:'',                                                  //状态
        rows:5,                                                     //每页条数
        total:0,                                                  //总数量
        loading:true,                                              //表单数据加载时
        /*查询数据*/
        /*修改数据*/
        newData:[],
        /*删除数据*/
        /*添加数据*/
        insertUrl:'/config/add',                                                //添加地址
        addType:'',
        addKey:'',
        addValue:'',
        addDesc:'',
        aaa:'',
        redAPIModal:false,
        redAPIModalTit:'',
        redAPIModalCen:''
      }
    },
    methods:{
      /*打开删除弹窗*/
      deletePop:function (key) {
          this.deleteBut  = true
          this.deleteId = key
      },
      /*读取数据*/
      selectData: function (page) {
        this.aaa=page
        var _self = this;
        _self.$http.post(_self.service + '/config/list',{
          page:page,
          rows:_self.rows,
          type:_self.queryType,
          key:_self.queryKey
        }).then(function (res) {
          if(res.data.code == '001'){
           // _self.$Message.success("数据读取成功！");
            var datas =  res.data.result.data;
            _self.tableData = datas;
            _self.total = res.data.result.total;
            _self.loading = false;
          }else{
            _self.modalFun('读取参数配置信息错误',res.data.msg)
          }
        })

      },
      /*打开*/
      showupdate:function (obj) {
        var _self = this;
        _self.updateButtom=true;                                     //修改控制按钮
        _self.newData = obj;
      },
      /*修改数据*/
      updateData: function () {
        var _self = this;
        if(_self.newData.type.replace(/(^\s*)|(\s*$)/g, "" ) == ""){
          this.$Message.warning('类型不能为空！')
          _self.selectData(_self.aaa);
          return
        }
        if(_self.newData.description.replace(/(^\s*)|(\s*$)/g, "" ) == ""){
          this.$Message.warning('描叙不能为空！')
          _self.selectData(_self.aaa);
          return
        }
        if(_self.newData.value.replace(/(^\s*)|(\s*$)/g, "" ) == ""){
          this.$Message.warning('内容不能为空！')
          _self.selectData(_self.aaa);
          return
        }

        _self.$http.post(_self.service + "/config/update",{
            key:_self.newData.key,
            value:_self.newData.value,
            description:_self.newData.description,
        }).then(function (res) {
          if(res.data.code == '001'){
            _self.$Message.success("修改成功！");
            _self.selectData(_self.aaa);
          }else{
            _self.modalFun('修改参数配置信息错误',res.data.msg)
          }
        })

      },
      /*删除数据*/
      deleteData: function () {
        var _self = this;
        _self.$http.post(_self.service + '/config/delete',{
            key:_self.deleteId
        }).then(function (res) {
          if(res.data.code == '001'){
            _self.$Message.success("删除成功！");
            _self.deleteBut_loading = true;
            _self.deleteBut = false;
            _self.selectData(_self.aaa)
          }else{
            _self.modalFun('删除参数配置信息错误',res.data.msg)
          }
        })

      },
      /*添加数据*/
      insertData:function () {
        var _self = this;
        if(_self.addType.replace(/(^\s*)|(\s*$)/g, "" ) == ""){
          this.$Message.warning('类型不能为空！')
          return
        }
        if(_self.addKey.replace(/(^\s*)|(\s*$)/g, "" ) == ""){
          this.$Message.warning('值不能为空！')
          return
        }
        if(_self.addValue.replace(/(^\s*)|(\s*$)/g, "" ) == ""){
          this.$Message.warning('内容不能为空！')
          return
        }
        if(_self.addDesc.replace(/(^\s*)|(\s*$)/g, "" ) == ""){
          this.$Message.warning('描叙不能为空！')
          return
        }

        _self.$http.post(_self.service + '/config/add',{
          type:_self.addType,
          key:_self.addKey,
          value:_self.addValue,
          description:_self.addDesc
        }).then(function (res) {
          if(res.data.code == '001'){
            _self.$Message.success("添加成功！");
            _self.selectData(_self.aaa);
            _self.emptyAdd();
          }else{
            _self.modalFun('添加参数配置信息错误',res.data.msg)
          }
        })
      },
      /*清空添加input*/
      emptyAdd:function () {
        var _self = this;
          _self.addType='',
          _self.addKey='',
          _self.addValue='',
          _self.addDesc=''
      },
      /*获取浏览器高度对 table的 row 显示进行数量控制 */
      tableRowH:function(){
          var _self = this;
          var winHeight = document.documentElement.clientHeight;
          _self.rows = Math.floor((winHeight - (40+50+50+100))/48)-1;
      },
      /*Modal弹出层*/
      modalFun:function (modTit,modCen) {
        this.redAPIModal = true;
        this.redAPIModalTit = modTit;
        this.redAPIModalCen = modCen;
      },
      redAPIModalFun:function () {
        this.redAPIModal = false
      },

  },
    created:function(){
      // this.$http.defaults.headers.common['userId'] =this.cookie.getCookie('userId') ;
      // this.$http.defaults.headers.common['ticket'] = this.cookie.getCookie('ticket');
      this.tableRowH();
      this.selectData('1')
    },
  }
</script>
<style>



  .pageBox{
    float: left;
    width: 100%;
    margin-top: 10px
  }
  .pageStyle{
    float: right;
    margin-right: 20px;
    margin-bottom: 10px;
  }
</style>
